﻿@using DataAccess;
@model PetStory
@{
    ViewData["Title"] = "爱宠故事内容";
}
@section Style {
    <style>
        .petStoryContentDiv a {
            text-decoration: none;
            color: black;
            font-size: 15px;
        }

            .petStoryContentDiv a:hover {
                text-decoration: underline;
                color: RoyalBlue;
            }
    </style>
}
<div style="width:1020px;margin:auto;" class="petStoryContentDiv">
    <div style="margin-top:25px;font-size:22px;font-weight:bold;">@Model.title</div>
    <div style="text-align:center;margin-bottom:20px;font-size:16px;margin-top:15px;">@Model.subtitle</div>
    <div style="background-color:black;height:1px; border:none;margin-top:20px;"></div>
    <div style="margin-top:20px;display:flex;">
        <div style="float:left;width:650px;margin-right:50px;">
            @{
                if (!string.IsNullOrEmpty(Model.videosrc))
                {
                    <div style="border:1px solid;border-color:silver;background-color:lightgray;display:flex;">
                        <video width="650" height="400" controls  src="/file/super/videos/@Model.videosrc">
                            <source  type="video/mp4">
                            <source  type="video/avi">
                            <source  type="video/webm">
                            您的浏览器不支持 video 属性。
                        </video>
                    </div>
                }
                else
                {
                    <div>
                        <img src='/file/super/imgs/@Model.coverimgsrc' style="width:650px; height:400px;" />
                    </div>
                }
            }
       </div>
        <div id="advertDiv" style="height:258px;width:320px;background-color:silver;float:left;">
            <div style="background-color:#f5f5f5;color:gray;font-size:13px;">广告</div>
            <a href='@ViewData["blockAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["blockAdvertID"])"><img src='@ViewData["blockAdvertImg"]' style="width:320px; height:240px;" /></a>
        </div>
    </div>
    <div style="clear:both;"></div>
    <div style="margin-top:40px;font-size:17px;display:flex;text-align:center;justify-content:center;">
        @Html.Raw(Model.content)
    </div>
    @{
        if(!string.IsNullOrEmpty(Model.otherimgsrc))
        {
            <div style="margin-top:40px;text-align:left;font-size:20px;font-weight:bold;">故事图集</div>
            <div style="background-color:black;height:1px; border:none;margin-top:10px;"></div>

            string[] imgUrls = Model.otherimgsrc.Split('|');
            for(int i=0;i< imgUrls.Length;i++)
            {
                string imgurl = imgUrls[i];
                if(i == 0)
                {
                    <div style="float:left;margin-top:20px;"><img src='/file/super/imgs/@imgurl' style="width:326px; height:220px;" /></div>
                }
                else
                {
                    <div style="float:left;margin-top:20px;margin-left:20px;"><img src='/file/super/imgs/@imgurl' style="width:326px; height:220px;" /></div>
                }
            }
        }
    }
    <div style="clear:both;"></div>
    @{
        if (ViewData["SimilarStories"] != null)
        {
            <div style="margin-top:40px;text-align:left;font-size:20px;font-weight:bold;">相似故事</div>
            <div style="background-color:black;height:1px; border:none;margin-top:10px;"></div>

            List<PetStory> psList = ViewData["SimilarStories"] as List<PetStory>;
            for (int i = 0; i < psList.Count; i++)
            {
                PetStory psObj = psList[i];
                if (i == 0)
                {
                    <div style="width:247px;float:left;margin-top:20px;">
                        <a href="/Home/PetStoryContent?id=@psObj.id" target="_blank" title="点击查看详细信息"><img src="/file/super/imgs/@psObj.coverimgsrc" style="width:247px;height:162px;"></a>
                        <div style="text-align:left;padding:4px;">
                            <div style="font-weight:bold;font-size:16px;"><a href="/Home/PetStoryContent?id=@psObj.id" target="_blank" title="点击查看详细信息">@psObj.title</a></div>
                            <div style="color:gray;font-size:14px;margin-top:5px;">@psObj.subtitle</div>
                        </div>
                    </div>
                }
                else
                {
                    <div style="width:247px;float:left;margin-top:20px;margin-left:10px;">
                        <a href="/Home/PetStoryContent?id=@psObj.id" target="_blank" title="点击查看详细信息"><img src="/file/super/imgs/@psObj.coverimgsrc" style="width:247px;height:162px;"></a>
                        <div style="text-align:left;padding:4px;">
                            <div style="font-weight:bold;font-size:16px;"><a href="/Home/PetStoryContent?id=@psObj.id" target="_blank" title="点击查看详细信息">@psObj.title</a></div>
                            <div style="color:gray;font-size:14px;margin-top:5px;">@psObj.subtitle</div>
                        </div>
                    </div>
                }
            }
        }
    }
    <div style="margin-bottom:30px;clear:both;"></div>
</div>
@section Scripts {
    <script type="text/javascript">
        $("#petStory").css("color", "red");

        var app = new Vue({
            el: "#app",
            mounted: async function () {
                let that = this;
                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                advertClickHandle(val) {
                    axios.post('../Home/AdvertClick', {
                        "advertID": val
                    }).then(response => {
                        console.log(response.data);
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
            },
            data() {
                return {
                }
            }
        });
    </script>
}